<template>
<!--html-->
    <div >
        <h3>{{title}}</h3>
        <router-link to="/earphone">耳机</router-link>
        <router-link to="/apparel">穿戴</router-link>
        <hr>
        <!--           二级路由的出口位置-->
        <router-view></router-view>
    </div>

</template>
<script>
//  编写js代码  es6  export  导出  模块化思想   import 导入
  export default {
      name: "SmartWearables",  //  组件对象在html页面中标签名字
      data(){
          return{
              tile:'智能穿戴'
          }
      }
  }
</script>

<!--scoped  作用于属性  css样式只对当前组件有效  -->
<style scoped>
/*编写css样式*/
div{
    width: 500px;
    height: 400px;
    border: 1px solid black ;
}

h3{
    display: inline-block;
    margin-right: 350px
}
</style>